import React, { useEffect } from 'react'
import './index.scss'
import { Button, Form, Input, Select } from 'antd'
import { shallow } from 'zustand/shallow'
import useUserStore from '../../store/useUserStore'
import { useNavigate } from 'react-router-dom'
import { LockOutlined, UserOutlined } from '@ant-design/icons';

const Login: React.FC = () => {
  const navigate = useNavigate()
  const { login, token, loading, setLoading } = useUserStore((state) => ({ login: state.login, token: state.token, loading: state.loading, setLoading: state.setLoading }), shallow)

  const onFinish = async (values: any) => {
    login(values)
  };

  useEffect(() => {
    if (token) {
      navigate('/')
      // getMenus()
    }
  }, [token])

  const onFinishFailed = (errorInfo: any) => {
    console.log('Failed:', errorInfo);
  };
  return (
    <div className='login-main'>

      <div className='login'>
        <h1>用户登录</h1>
        <Form
          name="basic"
          onFinish={onFinish}
          onFinishFailed={onFinishFailed}
          autoComplete="off" size="large" style={{ width: '100%' }}
        >
          <Form.Item
            label=""
            name="username"
            rules={[{ required: true, message: '请输入账号' }]}
          >
            <Input prefix={<UserOutlined className="site-form-item-icon" />} size="large" placeholder='请输入账号' />
          </Form.Item>

          <Form.Item
            label=""
            name="password"
            rules={[{ required: true, message: '请输入密码' }]}
          >
            <Input.Password prefix={<LockOutlined className="site-form-item-icon" />} size="large" placeholder='请输入密码' />
          </Form.Item>

          <Form.Item label="" name="typeNumber" rules={[{ required: true, message: '请输选择角色' }]}>
            <Select allowClear placeholder='请选择角色' >
              <Select.Option value={0}>学生</Select.Option>
              <Select.Option value={1}>教师</Select.Option>
              <Select.Option value={2}>系统用户</Select.Option>
            </Select>
          </Form.Item>

          <Form.Item >
            <Button type="primary" htmlType="submit" style={{ width: '100%' }} loading={loading}>
              登录
            </Button>
          </Form.Item>
        </Form>
        <div className='test'>
          <ul>
            <li>系统用户：amdin 密码 1234567</li>
            <li>学生：学生1 密码 1234567</li>
            <li>教师：秦始皇 密码 1234567</li>
          </ul>
        </div>
      </div>
    </div>
  )
}

export default Login